<template>
  <div class="role-container">
    <!-- 左侧列表 -->
    <div class="left-wrapper">
      <div v-for="(item,index) in roleList" :key="item.roleId" class="role-item" :class="{active:index === activeIndex}" @click="changeIndex(index)">
        <div class="role-info">
          <svg-icon :icon-class="index === activeIndex ? 'people' : 'user'" class="icon" />
          {{ item.roleName }}
        </div>
        <div class="more">
          <svg-icon icon-class="more" />
        </div>
      </div>
      <el-button class="addBtn" size="mini">添加角色</el-button>
    </div>
    <!-- 右侧权限和成员 -->
    <div class="right-wrapper">
      <!-- 对activedName进行初始化设置，当它为tree，那就默认打开tree的标签页 -->
      <el-tabs v-model="activedName">
        <!-- name="tree" 与选项卡绑定值 value 对应的标识符，表示选项卡别名 -->
        <el-tab-pane label="功能权限" name="tree">
          <div class="tree-wrapper">
            <div v-for="item in treeList" :key="item.id" class="tree-item">
              <div class="tree-title"> {{ item.title }} </div>
              <el-tree
                ref="refTreeRefs"
                :data="item.children"
                node-key="id"
                :props="{label:'title'}"
                show-checkbox
                check-strictly
                :default-expand-all="true"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="`成员(${userList.length})`" name="member">
          <el-table
            :data="userList"
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              label="序号"
              width="180"
            />
            <el-table-column
              prop="name"
              label="员工姓名"
              width="260"
            />
            <el-table-column
              prop="userName"
              label="登录账号"
            />
          </el-table>
          <div type="flex" style="height: 60xp;" align="end" justify="end">
            <el-pagination
              :page-sizes="[10, 20, 50, 100]"
              layout="total, prev, pager, next,sizes"
              :total="total"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getRoleListAPI, getTreeDatailApi, getTreeDatailUserApi, getTreeListApi } from '@/api/system'

export default {
  name: 'Role',
  data() {
    return {
      roleList: [],
      treeList: [],
      perms: [],
      activeIndex: 0,
      activedName: 'tree',
      userList: [],
      total: 0,
      params: {
        page: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.getRoleList()
    this.getTreeList()
  },
  async mounted() {
    await this.getRoleList()
    await this.getTreeList()
    this.getTreeDatail(this.roleList[0].roleId)
  },
  methods: {
    async getRoleList() {
      const res = await getRoleListAPI()
      this.roleList = res.data
      // console.log(res)
    },
    changeIndex(id) {
      this.activeIndex = id
      this.roleId = this.roleList[id].roleId
      // 点击切换时会刷新数据
      this.getTreeDatail(this.roleId)
      // console.log(this.roleId)
      // 切换后获取用户列表
      this.getTreeDatailUser(this.roleId)
    },
    async getTreeList() {
      const res = await getTreeListApi()
      this.treeList = res.data
      // 禁用
      // 目标：treeList里面的每一项以及嵌套的子项都添加一个disabled = true
      this.addDisable(this.treeList)
      // console.log(res)
    },
    async getTreeDatail(roleId) {
      const res = await getTreeDatailApi(roleId)
      // console.log(res.data.perms)
      this.perms = res.data.perms
      // 高亮切换
      // 遍历treeDataChange这个变量，将整个树形数据拿到了
      const treeDataChange = this.$refs.refTreeRefs
      treeDataChange.forEach((item, index) => {
        item.setCheckedKeys(this.perms[index])
      })
    },
    // 递归函数
    addDisable(treeList) {
      treeList.forEach(item => {
        item.disabled = true
        // 递归
        if (item.children) {
          this.addDisable(item.children)
        }
      })
    },
    // 获取与角色关联的用户列表
    async getTreeDatailUser(roleId) {
      const res = await getTreeDatailUserApi(roleId)
      console.log(res)
      this.userList = res.data.rows
      this.total = res.data.total
    }
    // handleSizeChange(newSize) {
    //   this.params.pageSize = newSize
    //   this.getTreeDatailUser()
    // },
    // handleCurrentChange(newPage) {
    //   this.params.page = newPage
    //   this.getTreeDatailUser()
    // }
  }
}
</script>

  <style  lang="scss">
  .role-container {
    display: flex;
    font-size: 14px;
    background-color: #fff;
    .left-wrapper {
      width: 200px;
      border-right: 1px solid #e4e7ec;
      padding: 4px;
      text-align: center;

      .role-item {
        position: relative;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        cursor: pointer;

        &.active {
          background: #edf5ff;
          color: #4770ff;
        }
      }

      .role-info {
        display: flex;
        align-items: center;

        .icon {
          margin-right: 10px;
        }
      }

      .more {
        display: flex;
        align-items: center;
      }
      .addBtn{
        width: 100%;
        margin-top: 20px;
      }
    }

    .right-wrapper {
      flex: 1;
      margin-left: 15px;

      .tree-wrapper {
        display: flex;
        justify-content: space-between;

        .tree-item {
          flex: 1;
          border-right: 1px solid #e4e7ec;
          padding: 0px 4px;
          text-align: center;
          .tree-title {
            background: #f5f7fa;
            text-align: center;
            padding: 10px 0;
            margin-bottom: 12px;
          }
        }
      }

      ::v-deep .el-tabs__nav-wrap {
        padding-left: 20px;
      }

      .user-wrapper{
        padding:20px;
      }
    }
  }
  </style>
